<template>
  <view :data-theme="globPrimary">
    <exam-navbar-category @change="handleEaxmChange" :categoryId="categoryId" :title="title"></exam-navbar-category>
    <block v-if="!$u.test.empty(pointList)">
      <view class="point-list">
        <edu-collapse ref="collapse" :head-style="collapseHeadStyle">
          <point-collapse
            v-for="(item, index) in pointList"
            :key="index"
            :item="item"
            @click="handleChoiceChange"
            @select="handleSelectChange"
            ref="collapseItem"
          >
          </point-collapse>
        </edu-collapse>
      </view>

      <!-- 分割线 -->
      <u-gap height="10" :margin-top="40" bg-color="#F7F7F7"></u-gap>

      <!-- 选择题数 -->
      <view class="point-count">
        <view class="title">出题数量</view>
        <view class="steps-wrap">
          <view
            class="steps__item"
            v-for="(item, index) in topicList"
            :key="index"
            :class="{ active: topicCurrentIndex == index }"
            @click="onTopicChenge(item, index)"
          >
            <view class="steps__item__dot">
              <view class="dot"></view>
            </view>
            <view class="steps__item__text">{{ item }}</view>
            <view
              class="steps__item__line"
              :style="{ width: topicStepsWidth + 'px' }"
              v-if="index < topicList.length - 1"
            ></view>
          </view>
        </view>
      </view>
    </block>

    <!-- 空数据 -->
    <edu-empty v-if="$u.test.empty(pointList)"></edu-empty>

    <view class="point-bottom-placeholder"></view>
    <view class="u-flex point-bottom">
      <button class="btn default u-fix-ios-appearance u-border-top" @click="onEmpty">
        清空筛选
      </button>
      <button class="btn primary u-fix-ios-appearance" @click="onAnswer">开始答题</button>
    </view>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import examNavbarCategory from '../components/exam-navbar-category.vue'
import pointCollapse from './components/point-collapse.vue'
export default {
  components: {
    examNavbarCategory,
    pointCollapse,
  },
  data() {
    return {
      categoryId: 0, // 分类id
      moduleId: 0, // 板块id
      pointList: [], // 知识点列表
      topicCount: 20, // 出题数量
      title: '', // 出题数量
      topicCurrentIndex: 1, // 默认位置
      topicList: [10, 20, 30, 40, 50], // 出题数量数据
      filtrateList: [], // 选中的知识点
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
    collapseHeadStyle() {
      return {
        padding: '40rpx 0',
        borderBottom: '1rpx solid #F7F7F7',
      }
    },
    topicStepsWidth() {
      let windowWidth = this.$u.sys().windowWidth
      let length = this.topicList.length
      let width = (windowWidth - 50) / (length - 1)
      return width
    },
  },
  onLoad(option) {
    this.moduleId = option.id
    this.categoryId = option.category_id
    this.title = option.title
  },
  methods: {
    getExamList() {
      this.$edu.api
        .getKnowledgeList({
          category: this.categoryId,
          module_id: this.moduleId,
        })
        .then((res) => {
          const { data } = res
          this.pointList = data.point_tree
        })
    },
    handleEaxmChange(id) {
      this.categoryId = id
      this.getExamList()
    },
    onTopicChenge(item, index) {
      this.topicCount = item
      this.topicCurrentIndex = index
    },
    // 单项选择
    handleChoiceChange(id) {
      let data = this.filtrateList.filter((item) => item == id)
      if (this.$u.test.empty(data)) {
        this.filtrateList.push(id)
      } else {
        let index = this.filtrateList.findIndex((item) => item == id)
        this.filtrateList.splice(index, 1)
      }
    },
    // 全选
    handleSelectChange(list, checked) {
      if (checked) {
        this.filtrateList = this.filtrateList.concat(list)
      } else {
        this.filtrateList = this.filtrateList.filter((item) => !list.includes(item))
      }
      // 去重
      this.filtrateList = this.filtrateList.reduce(
        (pre, item) => (pre.includes(item) ? pre : [...pre, item]),
        []
      )
    },
    // 清空
    onEmpty() {
      this.pointList.forEach((item, index) => {
        this.$refs.collapseItem[index].empty()
      })
      this.filtrateList = []
    },
    // 开始答题
    onAnswer() {
      this.$edu.judgeLogin(() => {
        if (this.$u.test.empty(this.filtrateList)) {
          this.$u.toast('请选择知识点')
        } else {
          let ids = this.filtrateList.toString()
          this.$u.route('pageFound/exam/point/topic', {
            id: this.moduleId,
            count: this.topicCount,
            ids: ids,
          })
        }
      })
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.point-list {
  padding: 0 30rpx;
}
.point-count {
  margin-top: 56rpx;
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #303133;
    padding: 0 30rpx;
  }
}
.point-bottom-placeholder {
  height: 88rpx;
}
.point-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  .left {
    flex: 1;
  }
  .right {
    flex: 1;
  }
  .btn {
    flex: 1;
    padding: 0;
    font-size: 32rpx;
    height: 88rpx;
    line-height: 88rpx;
  }
  .default {
    color: #606266;
    background-color: #ffffff;
  }
  .primary {
    color: #ffffff;
    @include bg-color;
  }
  ::v-deep button {
    border-radius: 0;
  }
  ::v-deep button:after {
    border: none;
    border-radius: 0;
  }
}
.steps-wrap {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  .steps__item {
    width: 50px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-direction: column;
    align-items: center;
  }
  .steps__item__dot {
    height: 40rpx;
    width: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    .dot {
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background-color: #ebeef5;
    }
  }
  .steps__item__text {
    margin-top: 20rpx;
    text-align: center;
  }
  .steps__item__line {
    position: absolute;
    top: 16rpx;
    left: 50%;
    height: 8rpx;
    background-color: #ebeef5;
  }
  .steps__item.active .steps__item__dot .dot {
    height: 40rpx;
    width: 40rpx;
    border-radius: 20rpx;
    background: #ffffff;
    border-width: 4rpx;
    border-style: solid;
    @include border-color;
  }
}
</style>
